<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>民主评测投票</title>
    <script src="static/vue.js"></script>
    <script src="static/tpbase.js"></script>
    <link rel="stylesheet" href="static/tpbase.css">
    <style>
        span{
            display: inline-block;
        }
        .cont1{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            display: flex;
            justify-content: center;
            background-color: #F2F6F9;
        }
        .cont1 img{
            width: .5rem;
            height: .5rem;
            margin-top: .25rem;
        }
        .cont1 div{
            color: rgba(16, 16, 16, 1);
            font-size: 16px;
            font-family: SourceHanSansSC-regular;
        }
        .cont2{
            width: 100%;
            height: 4.7rem;
            background-color: white;
            box-shadow: 0px 0px 6px 0px rgba(170, 170, 170, 1);
        }
        .c{
            overflow-x:hidden;
        }
        .c1{
            padding-top: .2rem;
        }
        .c1 span:nth-child(1) {
            display: inline-block;
            width: .4rem;
            height: .4rem;
            margin-left: .3rem;
            line-height: .4rem;
            border-radius: 50%;
            background-color: rgba(43, 117, 242, 1);
            color: #FFffff;
            font-size: .28rem;
            text-align: center;
            font-family: Roboto;
        }

        .c1 span:nth-child(2) {
            display: inline-block;
            margin-left: .1rem;
            color: rgba(16, 16, 16, 1);
            font-size: .28rem;
            text-align: center;
            font-family: SourceHanSansSC-regular;
        }
        .c2{
            margin: .1rem 0 0  .8rem;
            color: rgba(16, 16, 16, 1);
            font-size: .28rem;
        }

        .c2 span:nth-child(1) {
            font-weight: 600;
        }

        .c2 span:nth-child(2) {
            margin-left: .1rem;
        }
        .c3{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin: .1rem 0 0 .8rem;
        }
        .c31{
            display: flex;
        }
        .labels{
            width: .38rem;
            height: .38rem;
            margin-right: .1rem;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }
        .labels2{
            width: .38rem;
            height: .38rem;
            margin-right: .1rem;
            border: 1px solid #cccccc;
        }
        .labelsc {
            background-color: rgba(43, 117, 242, 1);
            background-image: url("imgs/勾.png");
            background-size: cover;
        }
        .inp{
            display: inline-block;
            width: .38rem;
            height: .38rem;
            opacity: 0;
            margin-right: .1rem;
        }
        .d1{
            margin-right: .25rem;
            color: rgba(16, 16, 16, 1);
            font-size: .28rem;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="top">
        <div class="head">
            <span class="back">×</span><span class="menu">···</span>
        </div>
        <div class="titles">
            <div class="title1">
                {{title}}
            </div>
            <div class="title2">
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content1" v-for="(item,index) in list">
            <div class="cont1">
                <img src="imgs/画笔.png"><div>{{item.name}}</div>
            </div>
            <div class="cont2" v-for="(item1,index1) in item.list1">
                <div class="c1"><!-----1赵萌------------->
                    <span>{{item1.num}}</span><span>{{item1.name}}</span>
                </div>
                <div class="c" v-for="(item2,index2) in item1.list2">
                    <div class="c2">
                        <span>{{item2.num}}</span><span>{{item2.name}}</span>
                    </div>
                    <div class="c3">
                        <div class="c31" v-for="(item3,index3) in item2.list3">
                            <label class="labels" :class="{labelsc:item3.select}"
                                   @click="selects(index,index1,index2,index3)">
                                <input class="inp" :type="item3.type" name="item3.names">
                            </label>
                            <div class="d1">{{item3.name}}</div>
                        </div>
                    </div>
                </div>
                <div class="c" v-for="(item4,index4) in item1.list4">
                    <div class="c2">
                        <span>{{item4.num}}</span><span>{{item4.name}}</span>
                    </div>
                    <div class="c3">
                        <div class="c31" v-for="(item5,index5) in item4.list5">
                            <label class="labels2" :class="{labelsc:item5.select2}"
                                   @click="selects2(index,index1,index4,index5)">
                                <input class="inp" :type="item5.type" name="item5.names">
                            </label>
                            <div class="d1">{{item5.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">提交</div>
</div>
<script>
    var vue=new Vue({
        el:"#app",
        select:false,
        select2:false,
        data:{
            title:"民主测评投票",
            list:[//子标题1,2
                {
                    name:"子标题1",
                    list1:[//赵萌1.2
                        {
                            num:"1",
                            name:"瑞萌",
                            list2:[//颜值+能力+选项2
                                {
                                    num:"01",
                                    name:"颜值",
                                    list3:[//选项
                                        {type:"radio", names:"1", name:"高", select:false},
                                        {type:"radio", names:"1", name:"中", select:false},
                                        {type:"radio", names:"1", name:"低", select:false},
                                    ]
                                },
                                {
                                    num:"02",
                                    name:"能力",
                                    list3:[//选项
                                        {type:"radio", names:"2", name:"高", select:false},
                                        {type:"radio", names:"2", name:"中", select:false},
                                        {type:"radio", names:"2", name:"低", select:false},
                                    ]
                                },
                            ],
                            list4:[
                                {
                                    num:"03",
                                    name:"特长",
                                    list5:[//特长
                                        {type:"checkbox", names:"3", name:"Java", select2:false},
                                        {type:"checkbox", names:"3", name:"android", select2:false},
                                        {type:"checkbox", names:"3", name:"ios", select2:false},
                                        {type:"checkbox", names:"3", name:"C++", select2:false},
                                        {type:"checkbox", names:"3", name:"linux", select2:false},
                                    ]
                                },
                            ]
                        },
                        {
                            num:"2",
                            name:"瑞萌萌",
                            list2:[//颜值+能力+选项2
                                {
                                    num:"01",
                                    name:"颜值",
                                    list3:[//选项
                                        {type:"radio", names:"4", name:"高", select:false},
                                        {type:"radio", names:"4", name:"中", select:false},
                                        {type:"radio", names:"4", name:"低", select:false},
                                    ]
                                },
                                {
                                    num:"02",
                                    name:"能力",
                                    list3:[//选项
                                        {type:"radio", names:"5", name:"高", select:false},
                                        {type:"radio", names:"5", name:"中", select:false},
                                        {type:"radio", names:"5", name:"低", select:false},
                                    ]
                                },
                            ],
                            list4:[
                                {
                                    num:"03",
                                    name:"特长",
                                    list5:[//特长
                                        {type:"checkbox", names:"6", name:"Java", select2:false},
                                        {type:"checkbox", names:"6", name:"android", select2:false},
                                        {type:"checkbox", names:"6", name:"ios", select2:false},
                                        {type:"checkbox", names:"6", name:"C++", select2:false},
                                        {type:"checkbox", names:"6", name:"linux", select2:false},
                                    ]
                                },
                            ]
                        },
                    ]
                },
                {
                    name:"子标题2",
                    list1:[//赵萌1.2
                        {
                            num:"1",
                            name:"瑞萌",
                            list2:[//颜值+能力+选项2
                                {
                                    num:"01",
                                    name:"颜值",
                                    list3:[//选项
                                        {type:"radio", names:"7", name:"高", select:false},
                                        {type:"radio", names:"7", name:"中", select:false},
                                        {type:"radio", names:"7", name:"低", select:false},
                                    ]
                                },
                                {
                                    num:"02",
                                    name:"能力",
                                    list3:[//选项
                                        {type:"radio", names:"8", name:"高", select:false},
                                        {type:"radio", names:"8", name:"中", select:false},
                                        {type:"radio", names:"8", name:"低", select:false},
                                    ]
                                },
                            ],
                            list4:[
                                {
                                    num:"03",
                                    name:"特长",
                                    list5:[//特长
                                        {type:"checkbox", names:"9", name:"Java", select2:false},
                                        {type:"checkbox", names:"9", name:"android", select2:false},
                                        {type:"checkbox", names:"9", name:"ios", select2:false},
                                        {type:"checkbox", names:"9", name:"C++", select2:false},
                                        {type:"checkbox", names:"9", name:"linux", select2:false},
                                    ]
                                },
                            ]
                        },
                        {
                            num:"2",
                            name:"瑞萌萌",
                            list2:[//颜值+能力+选项2
                                {
                                    num:"01",
                                    name:"颜值",
                                    list3:[//选项
                                        {type:"radio", names:"10", name:"高", select:false},
                                        {type:"radio", names:"10", name:"中", select:false},
                                        {type:"radio", names:"10", name:"低", select:false},
                                    ]
                                },
                                {
                                    num:"02",
                                    name:"能力",
                                    list3:[//选项
                                        {type:"radio", names:"11", name:"高", select:false},
                                        {type:"radio", names:"11", name:"中", select:false},
                                        {type:"radio", names:"11", name:"低", select:false},
                                    ]
                                },
                            ],
                            list4:[
                                {
                                    num:"03",
                                    name:"特长",
                                    list5:[//特长
                                        {type:"checkbox", names:"12", name:"Java", select2:false},
                                        {type:"checkbox", names:"12", name:"android", select2:false},
                                        {type:"checkbox", names:"12", name:"ios", select2:false},
                                        {type:"checkbox", names:"12", name:"C++", select2:false},
                                        {type:"checkbox", names:"12", name:"linux", select2:false},
                                    ]
                                },
                            ]
                        },
                    ]
                }
            ]
        },
        methods:{
            selects(index, index1, index2, index3) {
                for (var i = 0; i < this.list[index].list1[index1].list2[index2].list3.length; i++) {
                    if (i == index3) {
                        this.list[index].list1[index1].list2[index2].list3[i].select = true;
                    }
                    else {
                        this.list[index].list1[index1].list2[index2].list3[i].select = false;
                    }
                }
            },
            selects2(index, index1, index4, index5) {
                this.list[index].list1[index1].list4[index4].list5[index5].select2 = !this.list[index].list1[index1].list4[index4].list5[index5].select2;
            }
        }
    });
</script>
</body>
</html>